<!--vue模板-->
<template>
  <div>
    <el-input class="toolbar" v-model="userne" placeholder="请输入客户名称" clearable style="width: 250px;" />
    <el-select class="toolbar" v-model="csource" clearable  placeholder="请选择客户来源" @change="chgs">
      <el-option v-for="item in sourceList" :key="item.id" :label="item.name" :value="item.id" />
    </el-select>
    <el-select class="toolbar" v-model="clevel" clearable placeholder="请选择客户等级">
      <el-option v-for="item in levelList" :key="item.id" :label="item.name" :value="item.id" />
    </el-select>
    <el-select class="toolbar" v-model="cfollow" clearable placeholder="请选择跟进状态">
      <el-option v-for="item in followStatus" :key="item.id" :label="item.name" :value="item.id" />
    </el-select>
    <el-button class="toolbar" type="primary" :icon="Search" @click="uquery">查询</el-button>
    <el-button class="toolbar" type="primary" :icon="Refresh" @click="rquery">重置</el-button>
  </div>
  <div>
    <el-button type="primary" class="toolbar" @click="saveupdate()" :icon="Plus">添加用户</el-button>
    <el-button type="danger" class="toolbar" @click="delIds()" :icon="Delete">批量删除</el-button>
  </div>
  <el-table :data="tableData" style="width: 100%" border @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="40" align="center" />
    <el-table-column label="序号" align="center" width="55" header-align="center" type="index" />
    <el-table-column prop="name" align="center" width="160" label="客户姓名" header-align="center" />
    <el-table-column prop="mobile" align="center" width="130" label="联系电话" header-align="center" />
    <el-table-column label="客户来源" align="center" width="100" header-align="center">
      <template v-slot="{ row }">
        <span v-if="row.source === 1">电话营销</span>
        <span v-else-if="row.source === 2">微信营销</span>
        <span v-else-if="row.source === 3">SEM</span>
        <span v-else-if="row.source === 4">信息流</span>
        <span v-else-if="row.source === 5">客户介绍</span>
        <span v-else-if="row.source === 6">独立开发</span>
        <span v-else-if="row.source === 7">社群</span>
        <span v-else-if="row.source === 8">其他</span>
      </template>
    </el-table-column>
    <el-table-column align="center" label="客户等级" width="100" header-align="center">
    <template v-slot="{ row }">
     <span v-if="row.level === 1">A</span>
     <span v-else-if="row.level === 2">B</span>
     <span v-else-if="row.level === 3 ">C</span>
     <span v-else-if="row.level === 4">D</span>
    </template>
    </el-table-column>
    <el-table-column prop="user" label="前联系人" align="center" width="100" header-align="center" />
    <el-table-column prop="followDate" label="最后跟进时间" width="180" align="center" header-align="center"/>
    <el-table-column label="跟进状态" align="center" width="100" header-align="center" >
      <template v-slot="{ row }">
        <span v-if="row.followStatus === 1">初次沟通</span>
        <span v-else-if="row.followStatus === 2">方案报价</span>
        <span v-else-if="row.followStatus === 3">邀约进行</span>
        <span v-else-if="row.followStatus === 4">商务谈判</span>
        <span v-else-if="row.followStatus === 5">拟定合同</span>
        <span v-else-if="row.followStatus === 6">签订合同</span>
      </template>
    </el-table-column>
    <el-table-column prop="adduser" label="创建人" align="center" width="70" header-align="center" />
    <el-table-column prop="createTime" label="创建时间" align="center" width="180" header-align="center" />
    <el-table-column label="操作" header-align="center" >
      <template v-slot="{ row }">
        <el-button type="primary" size="small" :icon="Edit" @click="saveupdate(row)" style="margin-left: 11px;">编辑</el-button>
        <el-button type="danger" size="small" :icon="Delete" @click="del(row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination background layout="total,sizes,prev, pager, next" :total="total" :page-size="pageSize" class="page"
    :page-sizes="[5, 10, 20, 30, 40, 50]" @size-change="sizechg" @current-change="chg" />

  <!---添加或修改用户-->
  <SaveOrUpdate :visible="isshow" @close="clo" @refreshData="initData" ref="saveOrUpdate"></SaveOrUpdate>
</template>
  
  <!--vue 组件选项定义-->
<script setup>
import { ref, onMounted, watch } from "vue";
import axios from 'axios';
import { Check, Close, Delete, Edit, Message, Search, Star, Plus, Refresh } from '@element-plus/icons-vue';
import { queryCustomer } from "@/utils/api";
import { ElMessage, ElMessageBox } from "element-plus";
import SaveOrUpdate from "./SaveOrUpdate.vue";

//显示保存对话框
const isshow = ref(false);
const saveOrUpdate = ref(null);
function clo(f) {
  isshow.value = f;
}

const status = ref(1);

//保存与修改
function saveupdate(data) {
  isshow.value = true;
  saveOrUpdate.value.init(data);
}
const sourceList = ref([
  { id: 1, name: "电话营销" },
  { id: 2, name: "微信营销" },
  { id: 3, name: "SEM" },
  { id: 4, name: "信息流" },
  { id: 5, name: "客户介绍" },
  { id: 6, name: "独立开发" },
  { id: 7, name: "社群" },
  { id: 8, name: "其他" },
])
const levelList = ref([
  { id: 1, name: "A" },
  { id: 2, name: "B" },
  { id: 3, name: "C" },
  { id: 4, name: "D" },
])
const followStatus = ref([
  { id: 1, name: "初次沟通" },
  { id: 2, name: "方案报价" },
  { id: 3, name: "邀约进行" },
  { id: 4, name: "商务谈判" },
  { id: 5, name: "拟定合同" },
  { id: 6, name: "签订合同" },
])

const userne = ref();//存储客户名称
const csource = ref();//存储客户来源
const clevel = ref(); //存储跟进状态
const cfollow = ref();//


//表格数据
const tableData = ref([]);
const page = ref(1); //默认显示第一页
const pageSize = ref(5); //默认显示每页的记录数
const total = ref(0); //总记录数
const selectedIds = ref([]);
async function initData() {
  let params = {
    page: page.value,
    pageSize: pageSize.value,
    name: userne.value,
    source: csource.value,
    level: clevel.value,
    followStatus: cfollow.value,
    status:status.value
  };
  console.log(params);
  const rs = await queryCustomer(params);
  console.log(rs);
  if (rs.code == 1) {
    tableData.value = rs.data.rows;
    total.value = rs.data.total;
    console.log("tableData:", tableData.value);
  }
};

//当前页变化
function chg(pg) {
  //更改当前页
  page.value = pg;
  //重写查询
  initData();
}

//每页记录数变化
function sizechg(pgsize) {
  //更改当前的记录数
  pageSize.value = pgsize;
  //从第一页开始查询
  page.value = 1;
  initData();
}

//删除用户是，提示消息框
function del(id) {
  console.log(id);
  ElMessageBox.confirm("您确定要删除吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      //确认删除
      todel(id);
    })
    .catch(() => { });
}
//删除
function todel(id) {
  let ids = [id]
  let data = {}
  console.log(ids);
  delByIds(ids, data)
    .then((res) => {
      if (res.code == 1) {
        ElMessage({
          message: "删除成功",
          type: "success",
        });
        //重新查询
        initData();
      }
    })
};

//复选框拿到id
const handleSelectionChange = (selection) => {
  selectedIds.value = selection.map(item => item.id);
  console.log("选中的id:", selectedIds.value);
};

// watch(selectedIds,(newIds)=>{
//   //在这里对选中的行的id进行相应的操作
//   //列如存储到变量中，调用删除接口等
//   console.log(newIds)
// });
//批量删除
function delIds() {
  let ids = this.selectedIds;
  let data = {};
  console.log("要删除的id列表:", ids);
  ElMessageBox.confirm("您确定要删除吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      //确认删除
      delByIds(ids, data)
        .then((res) => {
          if (res.code == 1) {
            ElMessage({
              message: "删除成功",
              type: "success",
            });
            //重新查询
            initData();
          }
        });
    })
    .catch(() => { });

  //清空选中的行
  this.selectedIds = [];

}

//条件查询
async function uquery() {
  initData();
}

//重置按钮功能
function rquery() {
  userne.value = '',
    csource.value = '',
    clevel.value = '',
    cfollow.value = '',
    initData();
}
/***********生命周期函数********** */
//在页面挂载完后  vue会执行该方法 
onMounted(() => {
  initData();
});
</script>
  
  <!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
.toolbar {
  margin: 10px;
}

.page {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-right: 20px;
}
</style>
  